<template>
    <van-row>
  <van-col span="收货地址" class="span1">收货地址</van-col>
</van-row>
<van-address-edit
  :area-list="areaList"
  area-placeholder='请选择你所在地区'
  show-delete
  save-button-text='完成（2/2）'
  show-set-default
  show-search-result
  name
  delete-button-text='跳过'
  :search-result="searchResult"
  :area-columns-placeholder="['请选择', '请选择', '请选择']"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
/>

 <!-- <div class="mm">
 <van-button round block type="primary" native-type="submit" class="button1">
     下一步(1/2)
    </van-button>
    <van-button round block type="primary" native-type="submit" class="button2">
     跳过
    </van-button>
    </div> -->
</template>
<script lang="ts">
import { ref } from 'vue';
import { Toast } from 'vant';
import { areaList } from '@vant/area-data';
import router from '@/router';
export default {
  setup() {
    const searchResult = ref([]);
    const onSave = () =>{
    Toast('save');
    if (searchResult.value&&areaList&&searchResult) {
      router.push('/homePage')
      
    }
    } 
    const onDelete = () => Toast('delete');
    const onChangeDetail = (val) => {
      if (val) {
        searchResult.value = [
          {
            name: '广东',
            address: '海珠区',
          },
        ];
      } else { 
        searchResult.value = [];
      }
    };

    return {
      onSave,
      onDelete,
      areaList,
      searchResult,
      onChangeDetail,
    };
  },
};



</script>
<style scoped>
.span1{
    width: 100%;
    height: 50px;
    background-color:#c1ab96 ;
    color: white;
    font-size: 24px;
    line-height: 50px;
    text-indent: 5%;
 }
.mm{
    width: 70%;
    margin-top: 40%;
    margin-left: 15%;
 }
.button1{
    background-color: #c1ab96;
}
.button2{
    background-color: white;
    color: black;
}
--van-address-edit-button-margin-bottom{
  background-color: #c1ab96;
  width: 30%;
}
</style>